<template>
	<div class="mainbody">
		<div class="location">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item>
					<i class="iconfont icon-home"></i>
					管理中心
				</el-breadcrumb-item>
				<el-breadcrumb-item>系统功能</el-breadcrumb-item>
				<el-breadcrumb-item>管理菜单</el-breadcrumb-item>
			</el-breadcrumb>
		</div>

		<div class="toolbar-box">
			<div class="list-box">
				<div class="l-list">
					<el-button-group>
						<el-button icon="el-icon-plus" @click="$common.linkUrl('/manager/menu/edit')">新增</el-button>
						<el-button icon="el-icon-delete" @click="deleteCheckAll">删除</el-button>
					</el-button-group>
				</div>
				<div class="r-list">
					<div class="search-box">
						<el-input placeholder="输入关健字" v-model="keyword" @keyup.enter.native="initData" clearable>
							<el-button slot="append" icon="el-icon-search" @click="initData"></el-button>
						</el-input>
					</div>
				</div>
			</div>
		</div>

		<div class="content-box">
			<el-card class="table-card">
				<el-table ref="multipleTable" v-loading="loading" :data="listData" row-key="id" default-expand-all stripe
					:tree-props="{children: 'children', hasChildren: 'hasChildren'}" class="table-list" @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="45"></el-table-column>
					<el-table-column label="标题" min-width="160">
						<template slot-scope="scope">
							<span class="grey">{{scope.row.id}}.</span>
							<span>{{scope.row.title}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="name" label="标识" min-width="120">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.name}}</span>
						</template>
					</el-table-column>
					<el-table-column prop="linkUrl" label="链接" min-width="150">
						<template slot-scope="scope">
							<span class="nowrap">{{scope.row.linkUrl}}</span>
						</template>
					</el-table-column>
					<el-table-column label="排序" width="120">
						<template slot-scope="scope">
							<el-input-number size="mini" v-model="scope.row.sortId" @change="editSortId(scope.row.id, scope.row.sortId)" :min="-99999999" :max="99999999"></el-input-number>
						</template>
					</el-table-column>
					<el-table-column label="显示" width="80" align="center">
						<template slot-scope="scope">
							<el-switch :active-value="0" :inactive-value="1" v-model="scope.row.status" @change="editStatus(scope.row.id, scope.row.status)"></el-switch>
						</template>
					</el-table-column>
					<el-table-column fixed="right" label="操作" width="130">
						<template slot-scope="scope">
							<el-button size="mini" icon="el-icon-edit" @click="$common.linkUrl('/manager/menu/edit/'+scope.row.id)"></el-button>
							<el-button size="mini" icon="el-icon-plus" @click="$common.linkUrl('/manager/menu/edit?parentId='+scope.row.id)"></el-button>
							<el-button size="mini" type="danger" icon="el-icon-delete" @click="deleteItem(scope.row.id)"></el-button>
						</template>
					</el-table-column>
				</el-table>
			</el-card>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				keyword: '',
				listData: [],
				multipleSelection: [],
			}
		},
		methods: {
			//加载数据
			initData() {
				let _this = this;
				let sendUrl = "/admin/manager/menu";
				if (_this.keyword.length > 0) {
					sendUrl += "?keyword=" + encodeURI(_this.keyword);
				}
				this.$api.request({
					url: sendUrl,
					beforeSend() {
						_this.loading = true
					},
					success(res) {
						_this.listData = res.data;
					},
					error(err) {
						_this.listData = []
					},
					complete() {
						_this.loading = false
					}
				});
			},
			//多选删除
			deleteCheckAll() {
				let _this = this; //当前页面
				//拿到选中的数据
				let list = _this.multipleSelection;
				//检查是否有选中
				if (list.length==0) {
					_this.$message({ type: 'warning', message: '请选择要删除的记录！' });
					return false;
				}
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					_this.$api.request({
						method: 'delete',
						url: '/admin/manager/menu?ids=' + list.toString(),
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData(); //重新加载列表
							//重新加载菜单
							_this.$emit('loadMenu'); //通知父组件更新
						}
					})
				}).catch(function () { });
			},
			//单项删除
			deleteItem(val) {
				let _this = this; //当前页面
				//执行删除操作
				_this.$confirm('确认要删除该记录吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(function () {
					_this.$api.request({
						method: 'delete',
						url: '/admin/manager/menu/' + val,
						loading: true,
						successMsg: '已删除成功',
						success(res) {
							_this.initData();//重新加载列表
							//重新加载菜单
							_this.$emit('loadMenu'); //通知父组件更新
						}
					});
						
				}).catch(function () { });
			},
			//启用禁用操作
			editStatus(id, status) {
				let _this = this;
				_this.$api.request({
					method: 'patch',
					url: '/admin/manager/menu/' + id,
					data: [{ "op": "replace", "path": "/status", "value": status }],
					success(res) {
						//重新加载菜单
						_this.$emit('loadMenu'); //通知父组件更新
					}
				});
			},
			//排序数字操作
			editSortId(id, sortId) {
				let _this = this;
				_this.$api.request({
					method: 'patch',
					url: '/admin/manager/menu/' + id,
					data: [{ "op": "replace", "path": "/sortId", "value": sortId }],
					success(res) {
						//重新加载菜单
						_this.$emit('loadMenu'); //通知父组件更新
					}
				});
			},
			//选中第几行
			handleSelectionChange(val) {
				if (val.length > 0) {
					let idsArr = []
					val.forEach(function (item, index) {
						idsArr.push(item.id)
					})
					this.multipleSelection = idsArr;
				}
			}
		},
		created() {
			this.initData();
		}
	}
</script>